<template>
	<view class="answer-view">
		<!-- <view class="answer-tip">合计100分，80分通过，作答结束后提交试卷</view> -->
		<view class="answer-content">
			<view class="answer-list" v-for="(item,index) in list" :key="index">
				<view class="fx mlr">
					<view class="">{{index+1}}、</view>
					<view class="">
						<view class="">{{item.title}}</view>
						<view class="answer-type">（{{item.typename}}）</view>
					</view>
				</view>
				<!-- _type：1单选，2多选，4简答 -->
				<view class="mlr" v-if="item._type === 1">
					<view class="answer-option" :class="item.set_answer == it.code ? 'answer-option-active' : ''"
						v-for="it in item.options" :key="it.id" @click="checkAnswer(item,it.code)">
						{{it.code}}、{{it.name}}
					</view>
				</view>
				<view v-if="item._type === 2">
					<view class="answer-option" :class="it.checked ? 'answer-option-active' : ''"
						v-for="it in item.options" :key="it.id" @click="checkMultiAnswer(it)">{{it.code}}、{{it.name}}
					</view>
				</view>
				<view v-if="item._type === 4">
					<template v-if="item.children.length>0">
						<view class="" v-for="(it,i) in item.children" :key="it.id">
							<view class="fx" style="margin-top: 48rpx;">
								<view class="">({{i+1}})、</view>
								<view class="">
									<view class="">{{it.title}}</view>
									<view class="answer-type">（{{it.typename}}）</view>
								</view>
							</view>
							<template v-if="it._type === 1">
								<view class="answer-option"
									:class="it.set_answer == c.code ? 'answer-option-active' : ''"
									v-for="c in it.options" :key="c.id" @click="checkAnswer(it,c.code)">
									{{c.code}}、{{c.name}}
								</view>
							</template>
							<template v-if="it._type === 2">
								<view class="answer-option" :class="c.checked ? 'answer-option-active' : ''"
									v-for="c in it.options" :key="c.id" @click="checkMultiAnswer(c)">
									{{c.code}}、{{c.name}}
								</view>
							</template>
							<template v-if="it._type === 4">
								<view class="input-box">
									<textarea v-model="it.content" placeholder="请输入正确答案"></textarea>
								</view>
								<c-upload :imgs="it.imgList" :maxNum="9" @addSuccess="addImg($event,it)"
									@delImg="delImg($event,it)"></c-upload>
							</template>

						</view>
					</template>
					<template v-else>
						<view class="input-box">
							<textarea v-model="item.content" placeholder="请输入正确答案"></textarea>
						</view>
						<c-upload :imgs="item.imgList" :maxNum="9" @addSuccess="addImg($event,item)"
							@delImg="delImg($event,item)"></c-upload>
					</template>
				</view>
			</view>
		</view>
		<van-button block color="#4078E5" @click="submit">提交试卷</van-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], //题目列表
				pid: '', //项目id
				lid: '', //课程id
				isLast: false, //是否为最后一次练题
			};
		},
		onLoad(e) {
			if (e.pid) {
				this.pid = e.pid
			}
			if (e.id) {
				this.lid = e.id
			}
			if (e.isLast) {
				this.isLast = (e.isLast == 'true' ? true : false)
			}
			this.beginAnswer()
		},
		methods: {
			// 开始答题
			beginAnswer() {
				this.$api.requst('/gwc/projects/lesson/begin_test', {
					lesson_id: this.lid,
					project_id: this.pid
				}, 'POST').then((res) => {
					this.list = res.data
				})
			},
			// 单选答题
			checkAnswer(item, code) {
				item.set_answer = code
			},
			// 多选答题
			checkMultiAnswer(c) {
				c.checked = !c.checked
			},
			// 删除图片
			delImg(index, it) {
				it.imgList.splice(index, 1)
				it.imgIds.splice(index, 1)
			},
			// 上传图片
			addImg(url, it) {
				if (!it.imgList) {
					it.imgList = []
					it.imgIds = []
				}
				it.imgList.push(url)
				it.imgIds.push('')
			},
			// 提交试卷
			async submit() {
				let payload = []
				for (let i = 0; i < this.list.length; i++) {
					let item = this.list[i]

					if (item.children.length > 0) {
						for (let j = 0; j < item.children.length; j++) {
							let info = await this.initData(item.children[j])
							payload.push(info)
						}
					} else {
						let info = await this.initData(item)
						payload.push(info)
					}

				}
				console.log('payload', payload)
				for (let i = 0; i < payload.length; i++) {
					if (!payload[i].answer) {
						this.$api.showError('请先选择或填写您的答案！')
						return
					}
				}
				uni.showLoading({
					title: '数据提交中...'
				})
				this.$api.requst('/gwc/projects/lesson/commit_test', {
					lesson_id: this.lid,
					project_id: this.pid,
					payload: payload
				}, 'POST').then((res) => {
					this.$api.showError('提交成功！')
					setTimeout(() => {
						if (this.isLast) {
							uni.redirectTo({
								url: '/pages/workbench/trainCourse/learnResult/learnResult?pid=' +
									this.pid
							})
						} else {
							uni.navigateBack()
						}
					}, 500)
				})

			},
			// 整理提交数据
			async initData(item) {
				let info = {}
				info.qid = item.id
				if (item._type == 1) { //单选
					info.answer = item.set_answer
				} else if (item._type == 2) { //多选
					info.answer = item.options.filter(o => {
						return o.checked
					}).map(a => {
						return a.code
					}).join(',')
				} else if (item._type == 4) { //简答
					info.answer = item.content
					let ids = []
					if (item.imgList) {
						for (let j = 0; j < item.imgList.length; j++) {

							// 判断是否有图片id,没有则上传
							if (!item.imgIds[j]) {
								uni.showLoading({
									title: '文件上传中...'
								})
								let fid = await this.$api.requestUploadQNY(item.imgList[j])
								item.imgIds[j] = fid.asset_id
							}
							// let fid = await this.$api.requestUploadQNY(item.imgList[j])
							// ids.push(fid.asset_id)
						}
						info.file = item.imgIds.join(',')
					} else {
						info.file = ''
					}

				}
				return info
			}
		}
	}
</script>

<style scoped lang="scss">
	.answer-view {
		box-sizing: border-box;
		padding: 36rpx 32rpx 100rpx;

		.answer-tip {
			font-size: 30rpx;
			color: #8A8F99;
		}

		.answer-content {
			margin-top: 34rpx;
			margin-bottom: 48rpx;
			background: #FFFFFF;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			padding: 32rpx 24rpx 90rpx;
			font-size: 30rpx;

			.answer-list:not(:first-child) {
				margin-top: 48rpx;
			}

			.answer-type {
				margin-top: 8rpx;
				color: #8A8F99;
				font-size: 26rpx;
			}

			.answer-option {
				background: #FFFFFF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #E2E2E2;
				padding: 22rpx 24rpx;
				margin-top: 24rpx;
			}

			.answer-option:first-child {
				margin-top: 32rpx;
			}

			.answer-option-active {
				border: 2rpx solid #4078E5;
				color: #4078E5;
			}

			.mlr {
				margin-left: 24rpx;
				margin-right: 24rpx;
			}

			.input-box {
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #E2E2E2;
				padding: 24rpx;
				height: 240rpx;
				margin-top: 32rpx;

				textarea {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>